<template>
    <div>
        <div class="header">
        <div class="heart">
            <div class="nav">
                <div id="logo">
                    <a href=""><router-link :to="{name:'home'}"><img src="../assets/logo_register.png"></router-link></a>
                </div>
                <div class="list">
                    <li><a><router-link :to="{name:'home'}">首页</router-link></a></li>
                    <li><a><router-link :to="{name:'programmer'}">程序员</router-link></a></li>
                    <li><a href="">解决方案</a></li>
                    <li class="search">
                        <input type="text" id="search" placeholder="搜索您感兴趣的内容" />
                        <img src="../assets/fangdajing1.png">
                    </li>
                    <li><a href="">更多</a></li>
                    <li><a href="">登录</a></li>
                    <li><a href="">注册</a></li>
                    <!-- <li><a href="">工作台</a></li>
                    <li><a href="">消息</a></li>
                    <li><a href="">个人昵称</a></li> -->
                    
                </div>
            </div>
        </div>
    </div>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style scoped>
    .header{
    width: 100%;
	height: 80px;
	position: absolutes;
	border-bottom: 1px solid #d3d3d3;
}
.heart {
  width: 1000px;
  margin: 0 auto;
}
a{
  text-decoration: none;
  cursor: pointer;
  color:rgb(65, 61, 61);

}
li {
    list-style: none;
  }
.heart .nav #logo {
	width: 140px;
	height: 45px;
	margin-right: 25px;
	padding: 14px 0;
}
.heart #logo img {
	width: 100%;
	height: 100%;
}
.heart .nav{
    display: flex;
    font-size: 16px;
    line-height: 80px;
} 
.nav .list{
    display: flex;
    justify-content: space-between;
    width: 820px;
}
.nav .list li{
    width:70px;
    height: 80px;

}
.nav .list .search{
    width: 190px;
}
.header .heart .nav .list #search {
	width: 190px;
	height: 40px;
	border-radius: 30px;
	border: 1px solid #8EA8CA;
	outline: none;
}

.header .heart .nav .list img {
	width: 30px;
	height: 30px;
	position: absolute;
	top: 36px;
	transform: translateX(153px);
	cursor: pointer;
}
</style>